<html>

	<head>
		<meta charset="utf-8">
		<title>上下的导航条</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			
				
			}
			ul{
					list-style: none;
			}
			a{
				text-decoration: none;
			}
			.herder{
				height: 70px;
				padding: 0 30px;
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
				box-sizing: border-box;
			}
			.herder .logo{
				float: left;
			}
			.herder .logo img{
				height: 50px;
				margin-top: 10px;
			}
			.herder .menu{
				float: right;
				width: 80px;
				padding: 0 20px;
				height: 40px;
				background: #fff;
				margin-top: 15px;
			}
			.herder .menu p{
				line-height: 40px;
				font-weight: 900;
				font-size: 18px;
				color: #333;
				float: left;
				cursor: pointer;
			}
			.herder .menu .btn{
				width: 24px;
				height: 20px;
				float: right;
				margin-top:10px ;
				position: relative;
			}
			.herder .menu .btn i{
				position: absolute;
				display: block;
				left: 0;
				width: 24px;
				transition: 0.3s;
				height: 4px;
				background: #333333;
			}
			.herder .menu .btn i:nth-child(1){
				top: 0;
				transform-origin: left bottom ;
			
			}
			.herder .menu .btn i:nth-child(2){
				top: 8px;
			}
			.herder .menu .btn i:nth-child(3){
				top: 16px;
					transform-origin: top left ;
			
			}
			.herder .menu.on .btn i:nth-child(1){
				transform: rotate(40deg);
			
			}
			.herder  .menu.on .btn i:nth-child(2){
				opacity: 0;
			}
			.herder  .menu.on .btn i:nth-child(3){
					transform: rotate(-40deg);
			
			}
			.nav{
				width: 100%;
				display: none;
				background: #fff;
				padding-bottom: 30px;
				padding-top: 100px;
			
				
				
			}
			.nav .list{
				opacity: 0;
				transition: 0.5s;
			}
			.nav .list.on{
				opacity: 1;
			}
			.banner{
				width: 100%;
				height: 500px;
				background: url(images/banner.jpg) no-repeat center;
			}
			.list{
				padding: 0 30px;
		
			}
			.list:after{
				display: block;
				content: '';
				clear: both;
			}
			.list dl{
				float: left;
				padding-right:50px ;
			}
			.list dl dt{
				margin-bottom: 10px;
			}
			.list dl dt a{
				font-size: 16px;
				color: #333;
			}
			.list dl dd a{
				font-size: 14px;
				color: #555;
				line-height: 1.8em;
			}
		</style>

	
	<body>
			<div class="herder">
				<a class="logo" href="">
					<img src="images/2-160123095601538.jpg"/>
				</a>
				<div class="menu">
					<p>Menu</p>
					<div class="btn">
						<i></i>
						<i></i>
						<i></i>
					</div>
					
				</div>
			</div>
			<div class="nav">
				<div class="list">
					<dl>
						<dt><a href="">首页</a></dt>
							
					</dl>
					<dl>
						<dt><a href="">职业课程</a></dt>
						 <dd><a href="">课程库</a></dd>
						 <dd><a href="">知识体系图</a></dd>
						 <dd><a href="">职业路径</a></dd>
						 <dd><a href="">系列课程</a></dd>
					</dl>
					<dl>
						<dt><a href="">就业学习</a></dt>
						 <dd><a href="">web前端开发</a></dd>
						 <dd><a href="">Android开发</a></dd>
						 <dd><a href="">JAVAWEB开发</a></dd>
					</dl>
					<dl>
						<dt><a href="">极客社区</a></dt>
						 <dd><a href="">wiki</a></dd>
						 <dd><a href="">技术问答</a></dd>
						 <dd><a href="">社群</a></dd>
						 <dd><a href="">资源分享</a></dd>
					</dl>
					<dl>
						<dt><a href="">极客+</a></dt>
						 <dd><a href="">高校合作</a></dd>
						 <dd><a href="">极客人才联盟</a></dd>
						
					</dl>
				</div>
			</div>
			<div class="banner">
				
			</div>
	</body>
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script>
		$(function(){
		 $('.menu').click(function(){
		 	$(this).toggleClass('on')
		 	$('.nav .list').toggleClass('on')
		 	$('.nav').slideToggle()
		 	
		 })
			
		})
	</script>
</html>